<html>

<head>
  <title>Gavatar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <link rel="stylesheet" href="styles/styles.css">
  <script type="text/javascript" src="js/main.js"></script>
</head>

<body onload="init(event)">
  <div class="container">
    <input class="textBox" type="text" id="hexBox"/>
    <input class="textBox" type="range" id="numBox" min="0" max="100"/>
    <input class="textBox" type="range" id="seedBox" min="0" max="100"/>
    <br><br><br>
    <canvas id="canvas" width="290" height="290"></canvas>
    <div class="downloadButton" id="downloadButton" align="right">Download</div>
  </div>
</body>
  
<script type="text/javascript">
    
  function init(event) {
      var hexBox = document.getElementById("hexBox");
      var numBox = document.getElementById("numBox");
      var seedBox = document.getElementById("seedBox");
      var canvas = document.getElementById("canvas");
      Gavatar.init(event,hexBox,numBox,seedBox,canvas);

      var downloadButton = document.getElementById("downloadButton");
      downloadButton.onclick = function(event){
          downloadAvatar();
      }
  }
  
  function downloadAvatar() {
      var canvas = document.getElementById("canvas");
      download("gavatar", canvas);
  }  
    
</script>
</html>
